
<template>
  <h1>从store直接取 getters</h1>
  <h3>月份: {{info_store.birthMonth}}</h3>
  <h3>年龄状态: {{info_store.ageState}}</h3>
  <hr>
<!--  <button @click="user_store.nickname += '大大'">点修改昵称</button>-->
<!--  <button @click="user_store.account += '1111'">点修改账号</button>-->
<!--  <button @click="user_store.age += 2">点修改年龄</button>-->
<!--  <button @click="user_store.level += '1'">点修改等级</button>-->
<!--  <hr>-->
  <h1>computed映射为计算属性取getters</h1>
  <h3>月份: {{bir_birthMonth}}</h3>
  <h3>年龄状态: {{bir_ageState}}</h3>
  <button @click="bir_birthMonth += 2">点修改年龄</button>
  <hr>
  <h1>storeToRefs解构响应式的getters为自己的属性</h1>
  <h2>生日: {{birth}}</h2>
  <h3>年龄: {{age}}</h3>
  <h3>月份: {{z_birthMonth}}</h3>
  <h3>年龄状态: {{ageState}}</h3>
  <button @click="birth = '1992-11-11'">点修改生日</button>
  <button @click="age -= 5">点修改年龄</button>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useInfoStore2 } from "../stores/useInfoStore2";
import {computed} from "vue";

// 1.0 获取对象实例 这种是不可以修改的
let info_store = useInfoStore2()

// 2.0 这种是不可以修改的
let bir_birthMonth= computed(()=> info_store.birthMonth )
let bir_ageState= computed(()=> info_store.ageState )

// 3.0 解构响应式的数据
let {
  age,
  birth,
  birthMonth: z_birthMonth,// 别名
  ageState
} = storeToRefs(info_store)
</script>
